
/**
 * Created by lee_mxue on 17/4/27.
 */
import React from 'react';

import Carousel from './Carousel/Carousel';

class PictureSlick extends React.Component {
    constructor(props) {
        super(props);
        this.handleSwitchDialog = this.handleSwitchDialog.bind(this);   //关闭
        this.state = {
            dialogIsOpen : true,
            img_data: this.props.img_data,  //预览图片数据列表
        }


    }
    handleSwitchDialog(isOpen) {
        // console.log(event.target);
        this.setState({
            dialogIsOpen: isOpen
        })
        this.props.switchPicture()
    }
    render() {
        let data = [
            {
                "src":"http://upload-images.jianshu.io/upload_images/2541263-0f5e6044449875e1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
                "id":'6',
                "url":"http://localhost:8080/#/button"
            },
            {
                "src":"http://upload-images.jianshu.io/upload_images/2541263-5569e888aadf127a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
                "url":"https://www.baidu.com"
            },
            {
                "src":"http://upload-images.jianshu.io/upload_images/2541263-8679200d007b79c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
                "id":"4",
                "url":"http://localhost:8080/#/button"
            }
        ];
        var display = this.state.dialogIsOpen ? 'block' : 'none'
        return (
        <div className="js_dialog" id="iosDialog2"  style={{'display' : display}}>
            <div className="weui-mask" onClick={this.handleSwitchDialog.bind(this, false)}></div>
            <div className="weui-dialog" style={{ 'max-width': '600px', width: '100%'}}>
                <Carousel data={this.state.img_data}>
                    {
                        this.state.img_data.map( item => {
                            return(
                                <img src={item.src} alt=""/>
                            )
                        })
                    }
                </Carousel>
            </div>
        </div>

        );
    }
}

module.exports = PictureSlick